import React, { useState } from 'react'
import NavBar from '@/components/NavBar'
import styles from './index.module.scss'
import Input from '@/components/Input'
import TextArea from '@/components/TextArea'
import { useSelector } from 'react-redux'
const InputEdit = (props) => {
  const profile = useSelector((state) => state.profile.profile)
  const [value, setValue] = useState(profile[props.type] || '')
  return (
    <div className={styles.root}>
      <NavBar
        onLeftClick={() => props.onClose(false)}
        rightContent={
          <span
            className={'commit-btn'}
            onClick={() => props.onSubmit(props.type, value)}>
            提交
          </span>
        }>
        {props.type === 'name' ? '昵称' : '简介'}
      </NavBar>
      <div className='content'>
        {props.type === 'name' ? (
          <Input
            placeholder='请输入内容'
            value={value}
            onChange={(e) => setValue(e.target.value)}
          />
        ) : (
          <TextArea
            style={{ backgroundColor: '#f7f8fa' }}
            value={value}
            maxLength={100}
            onChange={(e) => setValue(e.target.value)}
          />
        )}
      </div>
    </div>
  )
}
export default InputEdit
